/**
 * 文档页面组件 - 展示生成的项目技术文档
 * 
 * 这个页面负责呈现基于GitHub仓库生成的技术文档，并提供以下功能：
 * - 显示文档生成进度和各阶段状态
 * - 展示最终生成的Markdown格式文档
 * - 提供文档修改、重新生成、复制和导出功能
 * - 集成API密钥管理，允许用户使用自己的API密钥
 * - 集成AI聊天功能，允许用户基于文档内容提问
 * 
 * 页面根据路由参数获取GitHub用户名和仓库名，并使用useDocument钩子
 * 管理文档生成和交互的全部状态和操作。
 * 
 * 重要⚠️: 此页面必须使用useDocument钩子，而不是useDiagram钩子。
 * 混淆这两个钩子会导致功能异常，例如调用错误的API端点。
 * 
 * 修复说明（2024-06-23）：
 * - 添加了全局标记检查，确保在文档页面不会错误地使用图表钩子
 * - 从URL查询参数中获取文档类型，确保正确传递到生成函数
 * - 修复在切换文档类型时使用正确的钩子和API端点
 * - 在所有导航操作中设置正确的全局标记
 * - 添加对localStorage的支持，记住用户的文档类型选择
 */
"use client";

// 全局变量声明，让TypeScript不报错
declare global {
  interface Window {
    _isDocumentMode?: boolean;
    _isDiagramMode?: boolean;
  }
}

// 页面初始化时的调试信息
if (typeof window !== 'undefined') {
  console.log("========================================");
  console.log("【DEBUG DOCUMENT PAGE】文档页面初始化");
  
  // 确保设置文档模式标记
  window._isDocumentMode = true;
  
  // 移除任何潜在的图表模式标记
  if (window._isDiagramMode) {
    console.error("【严重错误】检测到图表模式标记，这可能导致钩子混用，正在修复...");
    delete window._isDiagramMode;
  }
  
  console.log("========================================");
}

import { useParams, useSearchParams } from "next/navigation";
import MainCard from "~/components/main-card";
import DocumentLoading from "~/components/document-loading";
import DocumentView from "~/components/document-view";
import { ApiKeyDialog } from "~/components/api-key-dialog";
import { ApiKeyButton } from "~/components/api-key-button";
import { useState, useEffect } from "react";
import { useDocument } from "~/hooks/useDocument";
// 严禁导入useDiagram，防止混淆
// import { useDiagram } from "~/hooks/useDiagram"; // ❌ 禁止导入
import MainAIChat from "~/components/main-ai-chat";
import OutputTypeSelector, { OutputType } from "~/components/output-type-selector";
import { useRouter } from "next/navigation";

// 获取有效的文档类型，确保值在允许范围内
function getValidDocumentType(type: string | null): OutputType {
  const validTypes = [
    "overview-doc", 
    "detailed-doc", 
    "database-doc", 
    "api-doc", 
    "deployment-doc"
  ];
  
  // 检查传入的类型是否有效
  if (type && validTypes.includes(type)) {
    return type as OutputType;
  }
  
  // 如果传入的类型无效，检查localStorage中是否有保存的类型
  if (typeof window !== 'undefined') {
    const savedType = localStorage.getItem('current_document_type');
    if (savedType && validTypes.includes(savedType)) {
      console.log(`从localStorage恢复文档类型: ${savedType}`);
      return savedType as OutputType;
    }
  }
  
  // 默认使用overview-doc
  return "overview-doc";
}

export default function Document() {
  const [zoomingEnabled, setZoomingEnabled] = useState(false);
  const params = useParams<{ username: string; repo: string }>();
  const router = useRouter();
  const searchParams = useSearchParams();
  
  // 从URL参数或localStorage获取文档类型
  const initialDocType = getValidDocumentType(searchParams.get('type'));
  const [documentType, setDocumentType] = useState<OutputType>(initialDocType);
  
  // 确保localStorage与初始文档类型保持同步
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const storedType = localStorage.getItem('current_document_type');
      console.log(`【初始化检查】当前localStorage中的文档类型: ${storedType}, 初始化使用类型: ${initialDocType}`);
      
      // 如果localStorage中的类型与初始类型不同，更新localStorage
      if (storedType !== initialDocType) {
        console.log(`【初始化同步】更新localStorage文档类型: 从 ${storedType} 到 ${initialDocType}`);
        localStorage.setItem('current_document_type', initialDocType);
      }
    }
  }, [initialDocType]);
  
  const {
    document,
    error,
    loading,
    lastGenerated,
    cost,
    showApiKeyDialog,
    handleModify,
    handleRegenerate,
    handleCopy,
    handleApiKeySubmit,
    handleCloseApiKeyDialog,
    handleOpenApiKeyDialog,
    handleExportDocument,
    state,
  } = useDocument(params.username.toLowerCase(), params.repo.toLowerCase());
  
  // 处理文档类型变更
  const handleOutputTypeChange = (type: OutputType) => {
    // 保存前一个值用于比较
    const previousType = documentType;
    
    // 处理图表类型特殊情况
    if (type === "diagram") {
      console.log("【检测到图表类型】用户选择了生成图表，将导航到图表页面");
      
      // 在导航前设置正确的模式标记
      if (typeof window !== 'undefined') {
        window._isDiagramMode = true;
        delete window._isDocumentMode;
      }
      
      router.push(`/${params.username}/${params.repo}`);
      return;
    }
    
    // 设置新的文档类型并立即保存到localStorage
    if (typeof window !== 'undefined') {
      localStorage.setItem('current_document_type', type);
      console.log(`【类型变更】已立即保存文档类型到localStorage: ${type}`);
    }
    
    // 更新组件状态
    setDocumentType(type);
    
    // 更新URL参数而不刷新页面
    const newUrl = `/${params.username}/${params.repo}/document?type=${type}`;
    window.history.pushState({}, '', newUrl);
    
    // 如果文档类型变更，自动重新生成
    if (type !== previousType) {
      console.log(`【文档类型变更】从 ${previousType} 变为 ${type}，重新生成`);
      
      // 强制重新加载，确保钩子使用新的文档类型
      try {
        handleRegenerate("", type);
      } catch (error) {
        console.error(`【重新生成】handleRegenerate调用失败:`, error);
      }
    }
  };

  // 处理重新生成，传递文档类型
  const handleRegenerateWithType = (instructions: string) => {
    console.log(`【重新生成】使用文档类型: ${documentType}`);
    handleRegenerate(instructions, documentType);
  };
  
  // 当URL中的文档类型与钩子内部的不同时，更新钩子的文档类型
  useEffect(() => {
    // 如果页面已经在加载中或已有文档，不需要主动触发
    if (loading || document) {
      return;
    }
    
    // 通过localStorage检查当前钩子中的文档类型
    const currentHookDocType = localStorage.getItem('current_document_type') || 'overview-doc';
    
    // 如果URL类型与localStorage中的不同，需要更新
    if (documentType !== currentHookDocType) {
      console.log(`【同步文档类型】检测到文档类型不同，URL: ${documentType}, 存储: ${currentHookDocType}`);
      
      // 保存新的文档类型到localStorage
      localStorage.setItem('current_document_type', documentType);
    }
  }, [documentType, loading, document]);
  
  // 首次加载时自动生成文档
  useEffect(() => {
    // 如果没有文档且未加载中且无错误，则自动生成
    if (!document && !loading && !error) {
      console.log(`【首次加载】自动生成文档，类型: ${documentType}`);
      // 确保传递当前文档类型
      handleRegenerate("", documentType);
    }
  }, [document, loading, error, documentType, handleRegenerate]);
  
  // 构建GitHub仓库URL
  const repoUrl = `https://github.com/${params.username.toLowerCase()}/${params.repo.toLowerCase()}`;

  return (
    <div className="flex flex-col items-center p-4">
      <div className="flex w-full justify-center pt-8">
        <MainCard
          isHome={false}
          username={params.username.toLowerCase()}
          repo={params.repo.toLowerCase()}
          showCustomization={!loading && !error}
          onModify={handleModify}
          onRegenerate={handleRegenerateWithType}
          onCopy={handleCopy}
          lastGenerated={lastGenerated}
          loading={loading}
        />
      </div>
      {!loading && !error && (
        <>
          <div className="mt-4 flex justify-center">
            <OutputTypeSelector value={documentType} onChange={handleOutputTypeChange} />
          </div>
        </>
      )}
      {repoUrl && (
        <div className="mt-4 flex justify-center">
          <MainAIChat repoUrl={repoUrl} />
        </div>
      )}
      <div className="mt-8 flex w-full flex-col items-center gap-8">
        {loading ? (
          <DocumentLoading
            cost={cost}
            status={state.status}
            explanation={state.explanation}
            mapping={state.mapping}
            document={state.document}
          />
        ) : error || state.error ? (
          <div className="mt-12 text-center">
            <p className="max-w-4xl text-lg font-medium text-purple-600">
              {error || state.error}
            </p>
            {(error?.includes("API key") ||
              state.error?.includes("API key")) && (
              <div className="mt-8 flex flex-col items-center gap-2">
                <ApiKeyButton onClick={handleOpenApiKeyDialog} />
              </div>
            )}
          </div>
        ) : (
          <div className="flex w-full justify-center px-4">
            <DocumentView 
              document={document}
              onCopy={handleCopy}
              onExport={handleExportDocument}
              onModify={handleModify}
              repoUrl={repoUrl}
            />
          </div>
        )}
      </div>

      <ApiKeyDialog
        isOpen={showApiKeyDialog}
        onClose={handleCloseApiKeyDialog}
        onSubmit={handleApiKeySubmit}
      />
    </div>
  );
} 